<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈强 - 软件开发工程师简历</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #34495e;
            --accent-color: #3498db;
            --light-gray: #ecf0f1;
            --text-color: #2c3e50;
            --border-color: #bdc3c7;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
            color: var(--text-color);
            line-height: 1.6;
        }

        .resume-container {
            max-width: 1200px;
            margin: 2rem auto;
            background: white;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden;
        }

        .sidebar {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 2rem;
            position: relative;
        }

        .profile-photo {
            width: 128px;
            height: 158px;
            border-radius: 8px;
            margin: 0 auto 1.5rem;
            display: block;
            border: 3px solid white;
            object-fit: cover;
        }

        .main-content {
            padding: 2.5rem;
        }

        .section-title {
            color: var(--primary-color);
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--accent-color);
        }

        .contact-info {
            margin-bottom: 2rem;
        }

        .contact-item {
            margin-bottom: 0.8rem;
            display: flex;
            align-items: center;
        }

        .contact-item i {
            width: 20px;
            margin-right: 10px;
            color: var(--accent-color);
        }

        .editable {
            outline: none;
            transition: background-color 0.3s ease;
        }

        .editable:hover {
            background-color: rgba(52, 152, 219, 0.1);
            padding: 2px 4px;
            border-radius: 3px;
        }

        .project-item {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .project-title {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }

        .project-tech {
            color: var(--accent-color);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .project-desc {
            color: var(--text-color);
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .skills-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .skill-tag {
            background: var(--light-gray);
            color: var(--primary-color);
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .sidebar {
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="resume-container">
            <div class="row g-0">
                <!-- 左侧信息栏 -->
                <div class="col-md-4 sidebar">
                    <img src="author-img.jpg" alt="陈强" class="profile-photo">
                    
                    <h3 class="text-center mb-3" contenteditable="true">陈强</h3>
                    <p class="text-center text-light mb-4" contenteditable="true">软件开发工程师</p>
                    
                    <div class="contact-info">
                        <div class="contact-item">
                            <i class="fas fa-phone"></i>
                            <span contenteditable="true">17843355207</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <span contenteditable="true">15328642699@163.com</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-user"></i>
                            <span contenteditable="true">24岁</span>
                        </div>
                    </div>
                    
                    <h5 class="mb-3">技能专长</h5>
                    <div class="skills-list">
                        <span class="skill-tag" contenteditable="true">Python</span>
                        <span class="skill-tag" contenteditable="true">Flask</span>
                        <span class="skill-tag" contenteditable="true">Django</span>
                        <span class="skill-tag" contenteditable="true">Vue.js</span>
                        <span class="skill-tag" contenteditable="true">MySQL</span>
                        <span class="skill-tag" contenteditable="true">JavaScript</span>
                        <span class="skill-tag" contenteditable="true">Bootstrap</span>
                        <span class="skill-tag" contenteditable="true">PyQt5</span>
                    </div>
                </div>
                
                <!-- 右侧内容区 -->
                <div class="col-md-8 main-content">
                    <!-- 教育经历 -->
                    <section>
                        <h4 class="section-title">教育经历</h4>
                        <div class="mb-4">
                            <h5 contenteditable="true">长春师范大学</h5>
                            <p contenteditable="true">
                                <strong>计算机科学与技术 本科</strong> | 2021.09 - 2025.06<br>
                                GPA: 4.7/5.0
                            </p>
                            <p contenteditable="true">
                                <strong>荣誉奖项：</strong>校一等奖学金（2021年第二学期）、全国大学生创新创业大赛国奖、互联网创新创业大赛二等奖
                            </p>
                        </div>
                    </section>
                    
                    <!-- 项目经历 -->
                    <section>
                        <h4 class="section-title">项目经历</h4>
                        
                        <div class="project-item">
                            <div class="project-title" contenteditable="true">基于Flask+MySQL+Vue的校园博客系统</div>
                            <div class="project-tech" contenteditable="true">Python | Flask | Vue.js | MySQL | Bootstrap</div>
                            <div class="project-desc" contenteditable="true">
                                <strong>背景：</strong>为校园师生提供技术交流和知识分享平台<br>
                                <strong>任务：</strong>独立负责全栈开发，从0到1搭建完整博客系统<br>
                                <strong>行动：</strong>采用Flask框架构建RESTful API，Vue.js实现前后端分离，集成用户认证、文章管理、评论系统、标签管理等功能<br>
                                <strong>结果：</strong>系统上线后服务500+用户，支持Markdown渲染、图片上传、响应式布局，获得师生一致好评
                            </div>
                        </div>
                        
                        <div class="project-item">
                            <div class="project-title" contenteditable="true">基于Django+MySQL的校园商城服务网站</div>
                            <div class="project-tech" contenteditable="true">Python | Django | MySQL | Bootstrap | 微信支付API</div>
                            <div class="project-desc" contenteditable="true">
                                <strong>背景：</strong>解决校园内电子资料购买不便的问题<br>
                                <strong>任务：</strong>2天内独立完成商城系统开发、部署、支付集成<br>
                                <strong>行动：</strong>采用Django MVC架构，集成微信支付API，配置Nginx反向代理和HTTPS<br>
                                <strong>结果：</strong>系统支持在线支付、订单管理、用户认证，为学生家长提供安全便捷的购买渠道
                            </div>
                        </div>
                        
                        <div class="project-item">
                            <div class="project-title" contenteditable="true">基于PyQt5+MySQL的帮帮派权限管理系统</div>
                            <div class="project-tech" contenteditable="true">Python | PyQt5 | MySQL | Material Design</div>
                            <div class="project-desc" contenteditable="true">
                                <strong>背景：</strong>校园互助平台需要多角色权限管理<br>
                                <strong>任务：</strong>设计实现前端UI和权限控制模块<br>
                                <strong>行动：</strong>采用Material Design设计规范，实现登录注册、任务发布、权限分离等功能<br>
                                <strong>结果：</strong>创建统一样式配置，支持管理员、帮助者、工作者三种角色，界面美观易用
                            </div>
                        </div>
                    </section>
                    
                    <!-- 校园经历 -->
                    <section>
                        <h4 class="section-title">校园经历</h4>
                        <div class="mb-4">
                            <h5 contenteditable="true">计算机学院学生会 技术部部长</h5>
                            <p contenteditable="true">2022.09 - 2023.06</p>
                            <p contenteditable="true">
                                <strong>背景：</strong>学院需要技术支撑各类活动<br>
                                <strong>任务：</strong>负责学院官网维护、活动技术支持、技术培训<br>
                                <strong>行动：</strong>组织5次技术培训，覆盖200+学生；开发活动报名系统，提高效率80%<br>
                                <strong>结果：</strong>建立学院技术团队，提升学院数字化水平，获优秀学生干部称号
                            </p>
                        </div>
                    </section>
                    
                    <!-- 技能证书 -->
                    <section>
                        <h4 class="section-title">技能证书</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <h5>技术技能</h5>
                                <ul contenteditable="true">
                                    <li>精通Python、Flask、Django框架开发</li>
                                    <li>熟练掌握Vue.js、JavaScript、Bootstrap</li>
                                    <li>熟悉MySQL数据库设计与优化</li>
                                    <li>掌握Git版本控制、Linux部署</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h5>证书执照</h5>
                                <ul contenteditable="true">
                                    <li>高中教师资格证</li>
                                    <li>C1D驾驶证</li>
                                    <li>CET-4英语等级证书</li>
                                </ul>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 使所有带有contenteditable的元素可编辑
        document.querySelectorAll('[contenteditable="true"]').forEach(element => {
            element.addEventListener('blur', function() {
                // 保存到本地存储
                localStorage.setItem('resume-content-' + this.textContent, this.innerHTML);
            });
        });

        // 添加平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>